import React from 'react';
import '@/views/Index/Addzhibo/Addzhibo.scss'
import { PlusOutlined } from '@ant-design/icons'
import { Editor } from '@tinymce/tinymce-react';
import type { CheckboxChangeEvent } from 'antd/es/checkbox';
import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';
import Nav from '../../../components/Nav/Nav';
import { useNavigate } from 'react-router-dom';
import {
    Form,
    Input,
    Button,
    DatePickerProps,
    DatePicker,
    Switch,
    Checkbox,
    Upload,
} from 'antd';


interface Props {

}

const { TextArea } = Input;

let editorRef: any = null


const onChange = (e: CheckboxChangeEvent) => {
    console.log(`checked = ${e.target.checked}`);
};

const onChange1 = (checked: boolean) => {
    console.log(`switch to ${checked}`);
};
const dateFormatList = ['DD/MM/YYYY', 'DD/MM/YY', 'DD-MM-YYYY', 'DD-MM-YY'];

dayjs.extend(customParseFormat);

const { RangePicker } = DatePicker;

const dateFormat = 'YYYY/MM/DD';
const weekFormat = 'MM/DD';
const monthFormat = 'YYYY/MM';
const customFormat: DatePickerProps['format'] = (value) =>
    `custom format: ${value.format(dateFormat)}`;

const customWeekStartEndFormat: DatePickerProps['format'] = (value) =>
    `${dayjs(value).startOf('week').format(weekFormat)} ~ ${dayjs(value)
        .endOf('week')
        .format(weekFormat)}`;

function Addzhibo(props: Props) {

    var navigate = useNavigate()

    // 点击返回，跳转到直播列表页面
    var tozhibo = () => {
        navigate('/index/livestreaming')
    }

    return (
        <div className='addzhibo'>
            <Nav />
            <div className="basemsg">
                <div className="title">基础信息</div>
                <div className="form">
                    <Form.Item label="直播名称">
                        <Input placeholder='请输入' />
                    </Form.Item>
                    <Form.Item label="直播封面" >
                        <Upload action="/upload.do" listType="picture-card" >
                            <div>
                                <PlusOutlined />
                                <div style={{ marginTop: 8 }}>点击上传</div>
                            </div>
                        </Upload>
                    </Form.Item>
                    <Form.Item label="直播描述">
                        <TextArea rows={4} placeholder='请输入' />
                    </Form.Item>
                    <Form.Item label="开始时间">
                        <DatePicker placeholder='开始时间' />
                    </Form.Item>
                    <Form.Item label="预计直播时长">
                        <Input placeholder='请输入' />
                    </Form.Item>
                    <div className="teacher">
                        <p>直播讲师：</p>
                        <a>+选择讲师</a>
                    </div>
                    <div className="playback">
                        <div className="left">
                            <p>直播回放：</p>
                        </div>
                        <div className="right">
                            <Checkbox onChange={onChange}>禁止回放</Checkbox>
                            <div className="xianshi">
                                <Checkbox onChange={onChange}>限时回放</Checkbox>
                                <DatePicker defaultValue={dayjs('2015/01/01', dateFormat)} format={dateFormat} />至
                                <DatePicker defaultValue={dayjs('2015/01/01', dateFormat)} format={dateFormat} />
                            </div>
                            <Checkbox onChange={onChange}>永久回放</Checkbox>
                        </div>
                    </div>
                    <Form.Item label="排序号">
                        <Input placeholder='请输入' />
                    </Form.Item>
                </div>
            </div>
            <div className="set">
                <div className="title">直播设置</div>
                <div className="switch">
                    <div className="goods">
                        <div className="text">直播商品：</div>
                        <Switch defaultChecked onChange={onChange1} />
                        <a>+选择商品</a>
                    </div>
                    <div className="qiandao">
                        <div className="text">签到：</div>
                        <Switch defaultChecked onChange={onChange1} />
                    </div>
                    <div className="dashang">
                        <div className="text">直播打赏：</div>
                        <Switch defaultChecked onChange={onChange1} />
                    </div>
                    <div className="youhui">
                        <div className="text">优惠券：</div>
                        <Switch defaultChecked onChange={onChange1} />
                        <a>+选择优惠券</a>
                    </div>
                    <div className="share">
                        <div className="text">分享：</div>
                        <Switch defaultChecked onChange={onChange1} />
                    </div>
                    <div className="dianzan">
                        <div className="text">点赞：</div>
                        <Switch defaultChecked onChange={onChange1} />
                    </div>
                    <div className="pinglun">
                        <div className="text">评论：</div>
                        <Switch defaultChecked onChange={onChange1} />
                    </div>
                </div>
            </div>
            <div className="sale">
                <div className="title">售卖信息</div>
                <div className="contain">
                    <div className="left">
                        <p>上架时间：</p>
                    </div>
                    <div className="right">
                        <Checkbox onChange={onChange}>立即上架</Checkbox>
                        <div className="xianshi">
                            <Checkbox onChange={onChange}>定时上架</Checkbox>
                            <DatePicker defaultValue={dayjs('2015/01/01', dateFormat)} format={dateFormat} />至
                            <DatePicker defaultValue={dayjs('2015/01/01', dateFormat)} format={dateFormat} />
                        </div>
                        <Checkbox onChange={onChange}>暂不上架</Checkbox>
                    </div>
                </div>
                <div className="btn">
                    <Button className='btn1'>提交</Button>
                    <Button className='btn2' onClick={tozhibo} >返回</Button>
                </div>
            </div>
        </div>
    );
}

export default Addzhibo;